<template>
  <div class="bottom-nav-bar-box">
    <div class="bottom-nav-bar">
      <div
        class="bottom-nav-bar-item"
        :class="{active: showTabTitle == 'index'}"
        @click="bottomNavChange('index')"
      >
        <i class="home"></i>
        <span>首页</span>
      </div>
      <div
        class="bottom-nav-bar-item"
        :class="{active: showTabTitle == 'wealth'}"
        @click="bottomNavChange('wealth')"
      >
        <i class="wealth-bg"></i>
        <span>钱包</span>
      </div>
      <div
        class="bottom-nav-bar-item"
        :class="{active: showTabTitle == 'trader'}"
        @click="bottomNavChange('trader')"
      >
        <i class="trader"></i>
        <span>商旅</span>
      </div>
      <div
        class="bottom-nav-bar-item"
        :class="{active: showTabTitle == 'my'}"
        @click="bottomNavChange('my')"
      >
        <i class="mine"></i>
        <span>我的</span>
      </div>
    </div>
    <div class="h100"></div>
  </div>
</template>

<script>
export default {
  computed: {
    showTabTitle() {
      return this.$route.name;
    }
  },
  methods: {
    bottomNavChange(title) {
      let path = title == "index" ? "/" : "/" + title;
      this.$router.push(path);
    }
  }
};
</script>
<style scoped>
.bottom-nav-bar-box {
}
.bottom-nav-bar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  overflow: hidden;
  position: fixed;
  z-index: 100;
  bottom: 0;
  width: 100%;
  height: 98px;
  background-color: #fff;
}

.bottom-nav-bar-item {
  margin-top: 4px;
}
.bottom-nav-bar-item i {
  display: block;
  width: 60px;
  height: 60px;
  background-size: 60px 60px;
}
.bottom-nav-bar-item i.home {
  background-image: url("~assets/img/ic_tab_home_default@2x.png");
}
.bottom-nav-bar-item i.wealth-bg {
  background-image: url("~assets/img/ic_tab_wealth_default@2x.png");
}
.bottom-nav-bar-item i.trader {
  background-image: url("~assets/img/ic_tab_business_default@2x.png");
}
.bottom-nav-bar-item i.mine {
  background-image: url("~assets/img/ic_tab_mine_default@2x.png");
}
.bottom-nav-bar-item span {
  margin-top: 2px;
  display: block;
  color: #959595;
  font-size: 20px;
  line-height: 20px;
  text-align: center;
  font-family: "PingFangSC-Regular";
}
.bottom-nav-bar-item:hover span,
.bottom-nav-bar-item:active span,
.bottom-nav-bar-item.active span {
  color: #72a9fb;
}
.bottom-nav-bar-item:hover i.home,
.bottom-nav-bar-item:active i.home,
.bottom-nav-bar-item.active i.home {
  background-image: url("~assets/img/ic_tab_home_selection@2x.png");
}
.bottom-nav-bar-item:hover i.wealth-bg,
.bottom-nav-bar-item:active i.wealth-bg,
.bottom-nav-bar-item.active i.wealth-bg {
  background-image: url("~assets/img/ic_tab_wealth_selection@2x.png");
}
.bottom-nav-bar-item:hover i.trader,
.bottom-nav-bar-item:active i.trader,
.bottom-nav-bar-item.active i.trader {
  background-image: url("~assets/img/ic_tab_business_selection@2x.png");
}
.bottom-nav-bar-item:hover i.mine,
.bottom-nav-bar-item:active i.mine,
.bottom-nav-bar-item.active i.mine {
  background-image: url("~assets/img/ic_tab_mine_selection@2x.png");
}
.h100 {
  height: 120px;
  background: #edeef0;
}
</style>
